<template>
   <div class="box">
     <h1>this is child</h1>
     <button @click="changeParentName" >孙悟空</button>


     <button @click="change('王昭君')">王昭君</button>
     <button @click="change('西施')">西施</button>
     <button @click="change('貂蝉')">貂蝉</button>
     <button @click="change('杨玉环')">杨玉环</button>

     <button @click="dchange">隔2秒钟，名字变成小点点</button>
   </div>
</template>

<script>
export default {
    methods:{
        changeParentName(){
            //this.$emit("自定义事件",参数)
            this.$emit("cname")
        },
        change(name){
            //子组件通过$emit()触发自定义事件，绑定参数，参数就是event
            this.$emit("cparent",name)
        },
        dchange(){
            //回调一定要使用箭头函数，注意this指向问题
            setTimeout(()=>{
                this.$emit("dchange",'小点点')
            },2000)
        }
    }
}
</script>

<style>

</style>